<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">

            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="84">
        <div class="analyItem" v-for="(item,index) in tableList" :key="index">
            <p class="analyItemTit tx-center">{{item.user_name}}</p>
            <div class="analyItemCon">
                        <p class="col-md-4">
                            <span class="cLightGray pr8">姓名</span>
                            <span>{{ item.user_name}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">电话</span>
                            <span>{{ item.mobile}}</span>
                        </p>
                           <p class="col-md-4">
                            <span class="cLightGray pr8">级别</span>
                            <span>{{ item.tradition_level}}</span>
                        </p>
                        <p class="col-md-12">
                            <span class="cLightGray pr8">不可用原因</span>
                            <span>{{ item.frozenState}}  、{{ item.StateOftheStore}}</span>
                        </p>
            </div>
        </div>
    </div>
     <div class="pr10">
            <router-link tag="div" :to="routerPath('')" class="analyItem" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                     <p class="col-md-6">
                        <span class="cLightGray pr8">不可用人员</span>
                        <span>{{tableList.length}}</span>
                    </p>
                </div>
            </router-link>
        </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findNotApplicableOverBack } from '../Resources/Api'
export default {
    data () {
        return {
            tableList: []
        }
    },
    created () {
        this.findNotApplicableOverBack()
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
        leftInfo () {
            this.findNotApplicableOverBack()
        }
    },
    methods: {

        findNotApplicableOverBack () {
            let parms = {
                areaId: Number(this.leftInfo.dq_id),
                projectType: 0,
                projectMoney: 0,
                dqIds: ''
            }
            findNotApplicableOverBack(parms).then(result => {
                if (result.data.StatusCode === 0) {
                    this.tableList = result.data.Body[1]
                    this.finterTable()
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        }
    }
}
</script>
